import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link ,browserHistory} from 'react-router';
import api from '../api';

import {message,Row,Col,Card,Input,Button} from 'antd';
import NavBar from '../common/NavBar';
import ContentBody from '../common/ContentBody';
import {bind_change} from '../common/State';
import LoanDetail from './LoanDetail';

export default class RaiseLoanApproveDetail extends React.Component {
  constructor(props, context){
      super(props, context);
      let {id} = this.props.location.query||{};
      this.state={
          id,
          loan:{},
          passLoading:false,
          backLoading:false
      };
  }

  componentWillMount(){
    let {id} = this.state;
    this.doGet(id)
  }

  componentDidUpdate() {
    
  }

  

  async doGet(id){
    var result = await api('/loan/raise/detail',{id});
    if(result.cd!=0){
      message.error(result.msg);
      return
    }
    this.setState({
      loan:result.data,
      check_suggestion:"",
      passLoading:false,
      backLoading:false
    })
  }

  //
  async handleApprove (status){
    let {id,check_suggestion} = this.state;
    if(status==0&&!check_suggestion.replace(/ /g,"")){
      message.error('请填写审批意见');
      return;
    }
    this.setState({
      passLoading:status=='1'?true:false,
      backLoading:status=='0'?true:false
    })
    let result = await api('/loan/raise/loan/approve',{id,status,check_suggestion});
    if(result.cd!=0){
      message.error(result.msg);
      return
    }
    message.success('操作成功')
    this.doGet(id)
  }

  render() {
    let {loan={},passLoading,backLoading} = this.state;
    return (
        <div>
            <NavBar navs={[
              {title:'筹款项目审批',href:'/loan/raise/approve'},
              {title:'筹款项目详情'}
            ]} />
            <ContentBody className='container'> 
                <LoanDetail 
                  data={loan}
                />
                {loan.status==1?
                  <div className='flex middle marginT20'>
                      <label className='flex-shrink0'>审批意见:</label>
                      <div style={{width:'100%'}} className='marginL10 marginR10'>
                        <Input 
                          size='large' 
                          placeholder='请输入审批意见'
                          {...this::bind_change('check_suggestion')}
                        />
                      </div>
                      <div className='flex-shrink0'>
                        {!backLoading?
                          <Button 
                            type="primary" 
                            loading={passLoading}
                            onClick={this.handleApprove.bind(this,'1')}
                          >
                          通过
                          </Button>
                          :null
                        }
                        {!passLoading?
                          <Button 
                            className='marginL10' 
                            type="primary"
                             loading={backLoading}
                            onClick={this.handleApprove.bind(this,'0')}
                          >驳回</Button>
                          :null
                        }
                        
                      </div>
                  </div>
                  :null
                }
                
            </ContentBody>
        </div>
    )
  }
}
RaiseLoanApproveDetail.contextTypes= { router: React.PropTypes.object.isRequired};

